<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">  <!-- 定义文档的字符编码为 UTF-8 -->
    <title>Vue的响应式</title>  <!-- 网页的标题 -->
    <script src="vue.js"></script>  <!-- 引入 Vue.js 库 -->
</head>
<body>
    <div id="app">  <!-- 定义一个具有 id 为"app"的 div 元素 -->
        <div>Price :￥{{ price }}</div>  <!-- 展示价格变量 price 的值 -->
        <div>Total:￥{{ price * quantity }}</div>  <!-- 展示价格乘以数量的计算结果 -->
        <div>Taxes: ￥{{ totalPriceWithTax }}</div>  <!-- 展示包含税费的总价计算结果 -->
        <button @click="changePrice">改变价格</button>  <!-- 一个按钮，点击时触发 changePrice 方法 -->
    </div>
    <script type="text/javascript">
        var app = new Vue({  // 创建一个新的 Vue 实例并命名为 app
            el: '#app',  // 指定实例挂载的 DOM 元素的 id 为"app"
            data() {  // 定义数据函数
                return {  // 返回数据对象
                    price: 5.0,  // 初始化价格为 5.0
                    quantity: 2  // 初始化数量为 2
                };
            },
            computed: {  // 定义计算属性
                totalPriceWithTax() {  // 定义计算属性 totalPriceWithTax 的计算方法
                    return this.price * this.quantity * 1.03;  // 计算包含税费的总价
                }
            },
            methods: {  // 定义方法
                changePrice() {  // 定义 changePrice 方法
                    this.price = 10;  // 将价格修改为 10
                }
            }
        })
    </script>
</body>
</html>